<template>
    <div style="width :100%">
    <el-button @click="drawer = true" type="primary" style="float:right">打开目录</el-button>
    <el-drawer
    title="目录"
    :visible.sync="drawer"
    :with-header="false">
    <!--树-->
    <span>目录</span>
    <div>
         <el-tree
        ref="tree"
        node-key="id"
        :data="treeData"
        :props="props"

        :expand-on-click-node="false"
        highlight-current
        accordion
        @node-click="handleNodeClick"
        ></el-tree>
    </div>
    </el-drawer>
 
    <div v-show="!upurl" style="position: relative; width: 200px; height: 89px;"> 
        <img src="http://e.hiphotos.baidu.com/zhidao/pic/item/83025aafa40f4bfbc740001b084f78f0f63618e8.jpg"  style="width:900px" alt=""> 
        <span style="position: absolute; bottom: 50px; left: 0;font-size:22px;font-weight:700">请开始学习吧...</span> 
    </div>
    <div class="test_two_box" v-show="upurl">
        <video
        id="myVideo"
        class="video-js"
        style="width:900px;height:700px"
        >
        <source
            :src="upurl"
            type="video/mp4"
        >
        </video>
    </div>
    </div>
</template>

<script>

import {getCookie} from '@/libs/cookie'
import {select} from '@/api/modules/coursevideo'

export default {
    name:'',
    data() {
      return {
          data1:[],
        drawer: false,
         data:[],
        treeData:[],
        courseID:{
            id:''
        },
        videoInfor:{
            courseId:'',
        },
        props: {
                label: "name"
            },
        upurl: '',
      };
    },
 
     async mounted(){
        let courseID = JSON.parse(getCookie("courseID") || '{}');
        this.courseID.id = courseID
        this.courseTree()
     
     },
     methods:{
        handleNodeClick(data) {
            if(data.parent != 0)
            {

                this.upurl = data.videoUrl
                console.log(this.upurl);
                var video=this.$video('myVideo');
                video.src({
                src:this.upurl
                })
                this.initVideo()
            }
        },
        initVideo() {
        //初始化视频方法
        this.$nextTick(() =>{
        let myPlayer = this.$video(myVideo, {
            //确定播放器是否具有用户可以与之交互的控件。没有控件，启动视频播放的唯一方法是使用autoplay属性或通过Player API。
            controls: true,
            //自动播放属性,muted:静音播放
            autoplay: false,
            //建议浏览器是否应在<video>加载元素后立即开始下载视频数据。
            preload: "auto",
            //设置视频播放器的显示宽度（以像素为单位）
            width: "1000px",
            //设置视频播放器的显示高度（以像素为单位）
            height: "400px"
            })
        });
        },
        courseTree(filter){
            filter = {
                ...filter,
                ...this.courseID,
            }
            select(filter).then(res => {
                this.data = res.data.videoInfor
                 this.treeData =  this.toTree(this.data, "id", "parent");
                  console.log(this.treeData)
            })
        },
         //转换成树状结构所需要的data格式
        toTree(objects, keyName, parentKeyName) {
 
            if (!keyName) {
            throw "keyName argument is required";
            }
            if (!parentKeyName) {
            throw "parentKeyName argument is required";
            }
 
            // 列表项字典 将数组变成以objectId分组的对象，类似于{Vvwkeujpo:{},Rohdsfdofj:{}}
            var map = {};
            objects.forEach(x => (map[x[keyName]] = Object.assign({}, x)));
           
            // 已添加到父项的键
            var pushed = {};
 
            // 遍历列表项，将子项添加到父项的 children 数组
            for (const key in map) {
            if (map.hasOwnProperty(key)) {// 这样就可以过滤掉原型链上的可枚举属性了
                const x = map[key];
                if (x && x[keyName] && x[parentKeyName]) {
                var parent = map[x[parentKeyName]];
                if (parent) {
                    if (!parent.children) {
                    parent.children = [];
                    }
                    parent.children.push(x);
                    pushed[x[keyName]] = true;
                }
                }
            }
            }
 
            // 排除已添加到父项的项得到树
            var tree = [];
            for (const key in map) {
            if (map.hasOwnProperty(key)) {
                const x = map[key];
                if (!pushed[x[keyName]]) {
                tree.push(x);
                }
            }
            }
            return tree;
        },
    }
}
</script>

<style lang="scss" scoped>
.el-tree {
  font-size: 13px;
  background: #fafafa; // #eee;
  padding: 5px;
  // /deep/.tree_text {
  //   overflow: hidden;
  //   text-overflow: ellipsis;
  //   white-space: nowrap;
  //   display: inline-block;
  //   width: 80px;
  // }
}
</style>